<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('统计列表')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
  </head>
  <body class="gray-bg">
    <div class="ui-layout-west">
      <div class="main-content">
        <div class="box box-main">
          <div class="box-header">
            <div class="box-title"><i class="fa icon-grid"></i> 组织机构</div>
            <div class="box-tools pull-right">
              <a
                type="button"
                class="btn btn-box-tool menuItem"
                href="#"
                onclick="dept()"
                title="管理部门"
                ><i class="fa fa-edit"></i
              ></a>
              <button
                type="button"
                class="btn btn-box-tool"
                id="btnExpand"
                title="展开"
                style="display:none;"
              >
                <i class="fa fa-chevron-up"></i>
              </button>
              <button
                type="button"
                class="btn btn-box-tool"
                id="btnCollapse"
                title="折叠"
              >
                <i class="fa fa-chevron-down"></i>
              </button>
              <button
                type="button"
                class="btn btn-box-tool"
                id="btnRefresh"
                title="刷新部门"
              >
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
          <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="ui-layout-center">
      <div class="container-div">
        <div class="row">
          <div class="col-sm-12 search-collapse">
            <form id="user-form">
              <input type="hidden" id="deptId" name="deptId" />
              <input type="hidden" id="parentId" name="parentId" />
              <div class="select-list">
                <ul>
                  <li>用户名：<input type="text" id="userName" name="userName" /></li>
                  <li class="select-time">
                    <label>起止时间： </label>
                    <input
                      type="text"
                      class="time-input"
                      id="startTime"
                      placeholder="开始时间"
                      name="params[beginTime]"
                    />
                    <span>-</span>
                    <input
                      type="text"
                      class="time-input"
                      id="endTime"
                      placeholder="结束时间"
                      name="params[endTime]"
                    />
                  </li>
                  <li>
                    <!-- onclick="$.table.search('user-report')" -->
                    <a
                      class="btn btn-primary btn-rounded btn-sm"
                      onclick="queryUserWorkBtn()"
                      ><i class="fa fa-search"></i>&nbsp;搜索</a
                    >
                    <a
                      class="btn btn-warning btn-rounded btn-sm"
                      onclick="$.form.reset()"
                      ><i class="fa fa-refresh"></i>&nbsp;重置</a
                    >
                  </li>
                </ul>
              </div>
            </form>
            <!-- 由于用同一张表单查询会导致奇奇怪怪的问题 -->
            <!-- 所以这里又写了个表单，其中所有字段都隐藏，通过jq赋值 -->
            <form id="day-form">
              <input type="hidden" id="userId2" name="userId" />
              <input type="hidden" id="userName2" name="userName" />
              <input
                type="hidden"
                class="time-input"
                id="startTime2"
                name="params[beginTime]"
              />
              <input
                type="hidden"
                class="time-input"
                id="endTime2"
                name="params[endTime]"
              />
            </form>
          </div>

          <a
            class="btn btn-warning"
            onclick="$.table.exportExcel()"
            shiro:hasPermission="system:user:export"
            style="position: absolute; top: 22px; right: 30px;"
          >
            <i class="fa fa-download"></i> 导出
          </a>

          <div class="col-sm-8 select-table table-striped" style="width: 35%;">
            <table id="user-report" data-mobile-responsive="true"></table>
          </div>
          <div
            class="col-sm-8 select-table table-striped"
            style="width: 64%; margin-left: 1%;"
          >
            <table id="day-report" data-mobile-responsive="true"></table>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
    <script th:inline="javascript">
      var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
      var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
      var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
      var prefix = ctx + "system/user";

      // 默认查询时间，近一周
      let start = getDateString(-6)
      let end = getDateString(0)
      $("#startTime").val(start);
      $("#startTime2").val(start);
      $("#endTime").val(end);
      $("#endTime2").val(end);

      $(function() {
          var panehHidden = false;
          if ($(this).width() < 769) {
              panehHidden = true;
          }
          $('body').layout({ initClosed: panehHidden, west__size: 185 });
          queryUserWork();
          queryDeptTree();
          // queryUserDayReport()
      });

      // 默认查询时间，近一周
      function getDateString(num) {
        let d = new Date()
        d.setDate(d.getDate() + num);
        let yyyy = d.getFullYear();
        let mm = addZero(d.getMonth() + 1);
        let dd = addZero(d.getDate());
        let date = `${yyyy}-${mm}-${dd}`;
        return date;
      }

      function addZero(num) {
        return num < 9 ? "0" + num : num;
      }

      function queryUserWork() {
          var options = {
              id: 'user-report',
              formId: 'user-form',
              url: prefix + "/listWork",
              exportUrl: prefix + "/export",
              modalName: "用户",
              showSearch: false,
              showRefresh: false,
              showColumns: false,
              showToggle: false,
              columns: [{
                  checkbox: true
              },
              /* {
                  field: 'dept.deptName',
                  title: '部门'
              }, */
              {
                  field: 'userName',
                  title: '姓名'
              },
              /* {
                  field: 'workTimeRange',
                  title: '时间段'
              }, */
              {
                  field: 'workTime',
                  title: '工作时长'
              },
              {
                  field: 'works',
                  title: '合计天数'
              },
              {
                  title: '操作',
                  align: 'center',
                  formatter: function(value, row, index) {
                      var actions = [];
                      actions.push('<a class="btn btn-success btn-xs" id="btn-detail" href="javascript:void(0)"' +
                      ' onclick="queryUserDayReportBtn(\'' + row.userId + '\', \'' + row.userName + '\')"><i class="fa fa-edit"></i>详情</a>');
                      return actions.join('');
                  }
              }]
          };
          $.table.init(options);
      }

      function queryDeptTree()
      {
      	var url = ctx + "system/dept/treeData";
      	var options = {
              url: url,
              expandLevel: 2,
              onClick : zOnClick
          };
      	$.tree.init(options);

      	function zOnClick(event, treeId, treeNode) {
      		$("#deptId").val(treeNode.id);
      		$("#parentId").val(treeNode.pId);
          queryUserWorkBtn()
      	}
      }

      function queryUserDayReport(id, name) {
        $("#userId2").val(id)
        $("#userName2").val(name)
        $("#startTime2").val($("#startTime").val());
        $("#endTime2").val($("#endTime").val());
        var options = {
          id: "day-report",
          formId: 'day-form',
          url: ctx + "system/hxDayReport/list",
          createUrl: prefix + "/add",
          updateUrl: prefix + "/edit/{id}",
          removeUrl: prefix + "/remove",
          exportUrl: prefix + "/export",
          modalName: "日报",
          method: "post",
          showSearch: false,
          showRefresh: false,
          showColumns: false,
          showToggle: false,
          pageSize: 5,
          /* queryParams:{
            userName: name,
            userId: id,
            'params[beginTime]': start,
            'params[endTime]': end,
            // pageSize: 5,
            // pageNum: 1,
            orderByColumn: '',
            isAsc: 'asc'
          }, */
          // showExport: true,
          columns: [{
              checkbox: true
            },
            {
              field : 'id',
              title : '主键ID',
              visible: false
            },
            {
              field : 'projectId',
              title : '项目ID',
              sortable: true,
              visible: false
            },
            {
              field : 'projectType',
              title : '项目类型',
              visible: false,
              sortable: true,
              formatter: function(value, item, index) {
                return $.table.selectDictLabel(projectTypes, item.projectType);
              }
            },
            {
              field : 'proname',
              title : '项目'
            },
            {
              field : 'workDate',
              title : '工作日期',
              sortable: true,
              formatter: timeFormatter
            },
            {
              field : 'workDesc',
              title : '工作内容',
              formatter: function(value, row, index) {
                let html = row.workDesc.replace(/@@/gi, '<br />')
                return html
              }
            },
            {
              field : 'workTime',
              title : '工作时长',
              sortable: true
            }]
        }
        $.table.init(options);
      }

      function queryUserWorkBtn() {
        $("#user-report").bootstrapTable('destroy');
        start = $.common.formToJSON('user-form')['params[beginTime]']
        end = $.common.formToJSON('user-form')['params[endTime]']
        queryUserWork()
      }

      function queryUserDayReportBtn(id, name) {
        $("#day-report").bootstrapTable('destroy');
        queryUserDayReport(id, name)
      }

      $('#btnExpand').click(function() {
      	$._tree.expandAll(true);
          $(this).hide();
          $('#btnCollapse').show();
      });

      $('#btnCollapse').click(function() {
      	$._tree.expandAll(false);
          $(this).hide();
          $('#btnExpand').show();
      });

      $('#btnRefresh').click(function() {
      	queryDeptTree();
      });

      /* 用户管理-部门 */
      function dept() {
      	var url = ctx + "system/dept";
      	$.modal.openTab("部门管理", url);
      }

      /* 用户管理-重置密码 */
      function resetPwd(userId) {
          var url = prefix + '/resetPwd/' + userId;
          $.modal.open("重置密码", url, '800', '300');
      }

      /* 用户状态显示 */
      function statusTools(row) {
          if (row.status == 1) {
        			return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> ';
        		} else {
        			return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.userId + '\')"></i> ';
        		}
      }

      /* 用户管理-停用 */
      function disable(userId) {
      	$.modal.confirm("确认要停用用户吗？", function() {
      		$.operate.post(prefix + "/changeStatus", { "userId": userId, "status": 1 });
          })
      }

      /* 用户管理启用 */
      function enable(userId) {
      	$.modal.confirm("确认要启用用户吗？", function() {
      		$.operate.post(prefix + "/changeStatus", { "userId": userId, "status": 0 });
          })
      }

      function timeFormatter(value, row, index) {
        var html =('<span>'+row.workDate.substr(0,10)+'</span>');
        return html;
      }
    </script>
  </body>
</html>
